<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="1200px"
    draggable
    @close="closeDialog"
  >
    <div class="app-container">
      <el-card shadow="never" class="table-container">
        <template #header>
          <el-button type="success" plain @click="openDialog()"
            ><i-ep-plus />新增</el-button
          >
          <el-button
            type="danger"
            plain
            :disabled="ids.length === 0"
            @click="handleTableDelete()"
            ><i-ep-delete />删除</el-button
          >
        </template>

        <el-table
          ref="dataTableRef"
          v-loading="loading"
          :data="tableData"
          highlight-current-row
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="检测项目编号"
            prop="checkItemCode"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="检测项目名称"
            prop="checkItemName"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="检测类目"
            prop="checkCategoryId"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="检测方法"
            prop="checkItemMethod"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="使用工具"
            prop="checkItemTool"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="是否必输项"
            prop="isRequiredName"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="检查方式"
            prop="checkType"
            min-width="120"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="标准值范围上限"
            prop="standardMax"
            min-width="180"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="标准值范围下限"
            prop="standardMin"
            min-width="180"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="是否录入数值"
            prop="inputValueName"
            min-width="180"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="是否检查数值"
            prop="checkValueName"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="数据版本号"
            prop="version"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="备注"
            prop="remarks"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                link
                @click="openDialog(scope.row)"
                ><i-ep-edit />编辑</el-button
              >
              <el-button
                type="primary"
                size="small"
                link
                @click="handleTableDelete(scope.row.id)"
                ><i-ep-delete />删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- <el-pagination
          :background="true"
          :current-page="pageable.pageNum"
          :page-size="pageable.pageSize"
          :page-sizes="[10, 25, 50, 100]"
          :total="pageable.total"
          layout="total, sizes, prev, pager, next, jumper"
          class="mt-[20px]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </el-card>

      <checkschemeitem-edit
        :visible="addDialog.visible"
        :title="addDialog.title"
        :data="addDialog.data"
        @reset-table="(id:string) => (id?.length ? getInfoList() : getInfoList())"
        :is-readonly="addDialog.readvisible"
        @change-visible="changeVisible"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";

let checkData = reactive({
  id: "",
  schemeId: "",
});
let tableData = ref([]);
const emit = defineEmits(["reset-table", "change-visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

watch(
  () => props.data,
  (newVal: any) => {
    const { id } = newVal;
    Object.assign(checkData, props.data);
    console.log("checkData", checkData);
    getInfoList();
  }
);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);
defineOptions({
  name: "MDMCHECKSCHEMEITEM",
  inheritAttrs: false,
});

// 请求参数
const requestApi = "/mdm/checkschemeitem/queryByPage";

// 是否需要分页
const pagination = true;

const initParam = {};
const visibleDialog = ref(false);
// 初始化搜索参数数据
const searchParamInit = {};

const deleteParam = {
  api: "/mdm/checkschemeitem/delete",
  data: {},
};

const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  pageable,
  ids,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  loading,
}: any = useTable(
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  deleteParam
);

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});
async function getInfoList() {
  if (
    checkData.id === undefined ||
    checkData.id === null ||
    checkData.id === ""
  )
    return;
  const { data } = await request({
    url: "/mdm/checkschemeitem/getListBySchemeId/" + checkData.id,
    method: "get",
  });
  tableData.value = data;
  console.log("addDialog.data", tableData);
}
// 删除
function handleTableDelete(id: string) {
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await request({
      url: `/mdm/checkschemeitem/delete`,
      method: "post",
      data: id != undefined ? { ids: [id] } : { ids: ids.value },
    })
      .then(() => {
        ElMessage.success("删除成功");
        getInfoList();
      })
      .catch(() => ElMessage.info("已取消删除"));
  });
}
// 查询详情
async function getInfo(id: string) {
  const { data } = await request({
    url: `/mdm/checkschemeitem/get/${id}`,
    method: "get",
  });
  addDialog.data = data;
}
/** 打开检测方案项目表单弹窗 */
function openDialog(roleObj?: Object) {
  if (roleObj) {
    addDialog.title = "修改检测方案项目";
    getInfo(roleObj.id);
  } else {
    addDialog.title = "新增检测方案项目";
    addDialog.data = {
      schemeId: checkData.id,
      schemeCode: checkData.schemeCode,
      schemeName: checkData.schemeName,
    };
  }
  addDialog.readvisible = false;
  addDialog.visible = true;
}

/** 关闭表单弹窗 */
function closeDialog() {
  console.log("closeDialog");
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}
function resetForm() {
  // formRef.value.resetFields();
  // formRef.value.clearValidate();
  // formData.id = "";
  // formData.schemeId = "";
  // formData.schemeCode = "";
  // formData.checkItemCode = "";
  // formData.checkItemName = "";
  // formData.checkCategoryId = "";
  // formData.checkItemMethod = "";
  // formData.checkItemTool = "";
  // formData.isRequired = "";
  // formData.checkType = "";
  // formData.standardMax = "";
  // formData.standardMin = "";
  // formData.inputValue = "";
  // formData.checkValue = "";
  // formData.version = "";
  // formData.remarks = "";
  // formData.createTime = "";
  // formData.createdUserId = "";
  // formData.createdUserName = "";
  // formData.lastUpdateTime = "";
  // formData.lastUpdatedUserId = "";
  // formData.lastUpdatedUserName = "";
  // formData.deleted = "";
}
function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}
</script>
